<template>
  <div>
    <div><el-button type="primary" size="small" @click='add'>添加</el-button></div>

    <template v-if="type === 'campaignedit'">
      <p  v-for='(item,$index) in timeGroup'>
        <el-row >
          <el-col :span='20'>
            <el-date-picker
              v-model='item.timePickerGroup'
              type="datetimerange"
              placeholder="选择时间范围">
            </el-date-picker>
          </el-col>
          <el-col :span='3' :push='1' >
            <el-button type="text" @click='del($index)'>删除</el-button>
          </el-col>
        </el-row>
      </p>
    </template>
    <template v-else>
      <p  v-for='(item,$index) in timeGroup'>
        <el-row >
          <el-col :span='20'>
            <el-date-picker
              v-model='item.time'
              type="datetimerange"
              placeholder="选择时间范围">
            </el-date-picker>
          </el-col>
          <el-col :span='3' :push='1' >
            <el-button type="text" @click='del($index)'>删除</el-button>
          </el-col>
        </el-row>
      </p>
    </template>

  </div>
</template>
<script>
  export default {
    props: ['timeList', 'type'],
    data () {
      return {
        a: '',
        timeGroup: [],
        editTimeList: []
      }
    },
    watch: {
      timeGroup: {
        handler: function (val, oldVal) {
          if (this.type === 'campaignedit') {
            let result = this.dataProviderForEdit()
            this.$emit('updateTimeGroup', result)
          } else {
            let result = this.dataProvider()
            this.$emit('updateTimeGroup', result)
          }
        },
        deep: true
      },
      'timeList': {
        handler: function (val, oldVal) {
          this.timeGroup = this.timeList
        },
        deep: true
      }
    },
    methods: {
      add () {
        if (this.type === 'campaignedit') {
          this.timeGroup.push({
            timePickerGroup: []
          })
        } else {
          this.timeGroup.push({
            time: ''
          })
        }
      },
      del (index) {
        this.timeGroup.splice(index, 1)
      },
      dataProviderForEdit () {
        let arr = []
        this.timeGroup.forEach((item) => {
          let param = {}
          for (let key in item) {
            if (key !== 'timePickerGroup') {
              param[key] = item[key]
            }
            param['effectBeginTime'] = item.timePickerGroup[0] && new Date(item.timePickerGroup[0]).getTime()
            param['effectEndTime'] = item.timePickerGroup[1] && new Date(item.timePickerGroup[1]).getTime()
          }
          arr.push(param)
        })
        return arr
      },
      dataProvider () {
        // 场景为新增
        let arr = []
        this.timeGroup.forEach((item) => {
          let timeItem = {}
          timeItem['effectBeginTime'] = item.time[0] && new Date(item.time[0]).getTime()
          timeItem['effectEndTime'] = item.time[1] && new Date(item.time[1]).getTime()
          arr.push(timeItem)
        })
        return arr
      }
    }
  }
</script>
